<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
<title>注册界面</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link href="css/3.css" rel="stylesheet">

  </head>
  <body>
<div class="box">
		<div class="login-box">
			<div class="login-title text-center">
				<h1><small>快速注册</small></h1>
			</div>
			<div class="login-content ">
			<div class="form">
			<form action="#" method="post" name="login">
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group"> 
                        

                        
							<span class="input-group-addon">用&nbsp;户&nbsp;名：&nbsp;</span>
							<input type="text" id="username" name="userName" class="form-control" placeholder=""   onblur="fun(this)"/>
						</div>
                        <div id="wrong">！该用户名已被注册</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
							<input type="password" id="password" name="password" class="form-control" placeholder="" onblur="fun1()">
						</div>
                        <div class="input-group">
							<span class="input-group-addon">确认密码：</span>
							<input type="password" id="password1" name="password" class="form-control" placeholder="" onblur="fun1()">
						</div>
                        <div id="wrongtwo" ></div>
                        <div class="input-group">
							<span class="input-group-addon">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱： </span>
							<input type="text" id="email" name="password" class="form-control" placeholder="" onblur="fun2()"/>
						</div>
					</div>
				</div>
				<div class="form-group form-actions">
					<div class="col-xs-3 col-xs-offset-3 ">
						<center><button type="submit" class="btn btn-sm btn-info">同意协议并注册</button></center>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-6 link">
						
						</p>
					</div>
					<div class="col-xs-3 link">
						<p class="text-center remove-margin"><a href="Registration Agreement.html" ><small>注册协议</small></a>
						</p>
					</div>
				</div>
			</form>
			</div>
		</div>
	</div>
</div>

<script language="JavaScript" type="text/JavaScript">
function fun(x){
	if(x.value==""||x.value==null){
       x.value="用户名不能为空";
	}
}
function fun1(){
	var password=document.getElementById('password');
	var password1=document.getElementById('password1');
	var name=document.getElementById('wrongtwo');
	if(password.value==password1.value){
		name.innerHTML='';
	}else{
		name.innerHTML='两次密码不同';
	}
}
function fun2(){
	var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 
	var email=document.getElementById('email');
	if(!reg.test(email.value)){
		email.value="邮箱格式错误";
	}
}
</script>


</body>
  </html>